<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
    <link rel="stylesheet" href="../../resources/css/app.css" type="text/css" />
    <title>AIOS Visualization</title>
  	<script type="text/javascript" src="../../resources/js/sencha-touch-all-debug.js" charset="utf-8"></script>
	<script type="text/javascript" src="../../resources/js/dataStores.js" charset="utf-8"></script>
	<script type="text/javascript" src="../../resources/js/dataTables.js" charset="utf-8"></script>
		<script type="text/javascript" src="vault.js"></script>
				
	<style type="text/css">
		.x-button-label, .x-badge, .x-hasbadge .x-badge {font-weight:}
	</style>				
				
	<script type="text/javascript"> var d_i=0; var c_i=0; var m_i=0; var y_i=0; var i=0;</script>
	<script>
			
	
			Ext.application({
			name: 'AIOS',
			requires: [
			          	'Ext.data.Store',
			          	'Ext.dataview.List',
			      		'Ext.Toolbar',
			           	'Ext.chart.Chart', 
					   	'Ext.chart.interactions.PanZoom',
						'Ext.chart.series.*', 
						'Ext.chart.axis.*', 
						'Ext.chart.*',
						'Ext.TitleBar',
						'Ext.draw.Component',
						'Ext.chart.CartesianChart',
						'Ext.Viewport.*'
			           
			       ],
			launch: function() {
				
					Ext.create("Ext.tab.Panel", {
					fullscreen: true,
					activeItem: 1,
					tabBarPosition: 'bottom',

					items: [
					        
//************************************** Disabled **************************************************************************				        

							{
						    title: ' ',
						    styleHtmlContent: true,
						    scrollable: true,
						    
						    listeners: {
						    	activate: function() {
						    		this.setHidden(true);
								}
							},
						 }, 
					        
//************************************** Present View **************************************************************************				        
					    
				            {
				                title: '制御条件',
				              	iconCls: 'settings',
				                styleHtmlContent: true,
				                pressed : true,
				                scrollable: true,
								listeners: {
									activate: function() {
									

										Ext.data.JsonP.request({
											url: 'http://153.121.40.23:8080/aios-api/aios/api/GetCurrentPower.php',
											method: 'POST',
											callbackkey: 'callback',
											params: {
												tap_id: 1
											},

											scope: this,      /// fix handler scope

											callback: function (response, value, request) {
												var wattComponent = Ext.getCmp('set1_watt');
												wattComponent.setValue(value.response.electric_power);
												
												var ampereComponent = Ext.getCmp('set1_ampere');
												ampereComponent.setValue(value.response.electric_current);
												
											},

											failure: function (response, request) {
												Ext.Msg.alert("申し訳ありませんが、再試行してください... </br>"+response);
											}
										});
										
									}
								},

								items: [
								        
						//////////// Header /////////////////		        
										{
											docked: 'top',		
					 		       			xtype : 'titlebar',
					 		       			docked : 'top',
					 		       			title : '制御条件',
					 		       			items : [
					 		       			{
					 		       				xtype : 'button',
					 		       				align : 'right',
					 		       				ui : 'round',
					 		       				iconCls: 'home',
					 		       				text : 'ホーム',
					 		       				 handler: function(){
					 		       			            document.location.href = "../../index.html";         
					 		       			        }
					 		       			}
					 		       			]
					 		            },
										

					//////////////// Set Current Wattage and Amperage ///////////////
										{

					 		    			xtype: 'fieldset',
					 		    		 	layout: {
					 		                    type: 'hbox',
					 		                    pack: 'start', 
					 		                   align: 'middle',
					 		                },
					 		    			items: [
					 		    			
					 		    			{	
					 		    				 	xtype: 'label',
					 		    				 	html: '現在の使用電力（全体) - ', 
					 		    			},
					 		    			{
					 		    					xtype: 'textfield',
					 		    					id: 'set1_watt',
					 		    					clearIcon : false,
					 		    					label: 'W :',
					 		    				},
					 		    				{
					 		    					xtype: 'textfield',
					 		    					id: 'set1_ampere',
					 		    					clearIcon : false,
					 		    					label: 'A :',
					 		    			}]
					 		    		
										},
										
										{

					 		    			xtype: 'fieldset',
					 		    		 	layout: {
					 		                   align: 'left'
					 		                },
					 		                defaults: {
					 		                	labelWidth: '35%'
					 		                },
					 		    			items: [
					 		    			
					 		    			{	
					 		    				 	xtype: 'textfield',
					 		    				 	label: '電流制御',
					 		    				 	clearIcon : false,
					 		    				 	value : '有効'
					 		    				 	
					 		    			}, 
					 		    			{	
				 		    				 	xtype: 'textfield',
				 		    				 	label: '契約電流［Ａ］',
				 		    				 	value : '50',
				 		    				 	clearIcon : false,
				 		    				 	
				 		    				},
				 		    				{	
				 		    				 	xtype: 'textfield',
				 		    				 	label: '目標電流比［％］',
				 		    				 	clearIcon : false,
				 		    				 	value : '80    [40]'
				 		    				 	
				 		    				},
				 		    				{	
				 		    				 	xtype: 'textfield',
				 		    				 	label: '電力量制御',
				 		    				 	clearIcon : false,
				 		    				 	value : '無効'
				 		    				 	
				 		    				},
				 		    				{	
				 		    				 	xtype: 'textfield',
				 		    				 	label: '目標電力量/月［kWh］',
				 		    				 	clearIcon : false,
				 		    				 	value : '1.5'
				 		    				 	
				 		    				},
				 		    				{	
				 		    				 	xtype: 'textfield',
				 		    				 	label: 'エアコンモード',
				 		    				 	clearIcon : false,
				 		    				 	value : '冷房'
				 		    				 	
				 		    				}
				 		    				
					 		    			
					 		    			]
					 		    		
										},
										
										]
					 	      		 },
				 		    		

				                
//************************************** Statistic View *********************************************************************************************

				            {
				                title: '制御順位',
				              	iconCls: 'chart',
				              	styleHtmlContent: true,
								scrollable: true,
								
								listeners: {
									activate: function() {
									

										Ext.data.JsonP.request({
											url: 'http://153.121.40.23:8080/aios-api/aios/api/GetCurrentPower.php',
											method: 'POST',
											callbackkey: 'callback',
											params: {
												tap_id: 1
											},

											scope: this,      /// fix handler scope

											callback: function (response, value, request) {
												var wattComponent = Ext.getCmp('s_watt');
												wattComponent.setValue(value.response.electric_power);
												
												var ampereComponent = Ext.getCmp('s_ampere');
												ampereComponent.setValue(value.response.electric_current);
												
											},

											failure: function (response, request) {
												Ext.Msg.alert("申し訳ありませんが、再試行してください... </br>"+response);
											}
										});
										
									}
								},

								items: [
								        
						//////////// Header /////////////////		        
										{
											docked: 'top',		
					 		       			xtype : 'titlebar',
					 		       			docked : 'top',
					 		       			title: '制御順位',
					 		       			items : [
					 		       			{
					 		       				xtype : 'button',
					 		       				align : 'right',
					 		       				ui : 'round',
					 		       				iconCls: 'home',
					 		       				text : 'ホーム',
					 		       				 handler: function(){
					 		       			            document.location.href = "../../index.html";         
					 		       			        }
					 		       			}
					 		       			]
					 		            },
										

					//////////////// Set Current Wattage and Amperage ///////////////
										{

					 		    			xtype: 'fieldset',
					 		    		 	layout: {
					 		                    type: 'hbox',
					 		                    pack: 'start', 
					 		                   align: 'middle'
					 		                },
					 		    			items: [
					 		    			
					 		    			{	
					 		    				 	xtype: 'label',
					 		    				 	html: '現在の使用電力（全体) - ', 
					 		    			},
					 		    			{
					 		    					xtype: 'textfield',
					 		    					id: 's_watt',
					 		    					clearIcon : false,
					 		    					label: 'W :',
					 		    				},
					 		    				{
					 		    					xtype: 'textfield',
					 		    					id: 's_ampere',
					 		    					clearIcon : false,
					 		    					label: 'A :',
					 		    			}]
					 		    		
										},
										 
										{
											xtype: 'fieldset',
											id: 'gd',
					 		    		 	layout: {
					 		                    type: 'hbox',
					 		                   align: 'left'
					 		                },
					 		    			items: [
														 {
															xtype: 'fieldset',
															width: '80%',
															styleHtmlContent: true,
															html: [generateHtmlSettingTable()],
														} , 
														/* {	
							 		    				 	xtype: 'textfield',
							 		    				 	label: '契約電流［Ａ］',
							 		    				 	value : '50',
							 		    				 	clearIcon : false,
							 		    				 	
							 		    				}, */
							 		    				{	
							 		    				 	xtype: 'label',
							 		    				 	html: '和室照明 OFF </br> 和室テレビOFF ', 
							 		    				},
					 		    			        ]
										}
										
										]
					
				 	      },
					]
				});
			}
		});
	</script>

    

 </head>

 <body>
 </body>

</html>
